<template>
  <div class="nav-page">
    <div class="nav-container">
      <div 
        v-for="(item, index) in navItems" 
        :key="index"
        class="nav-item"
        :class="{ active: item.active }"
        @click="handleNavClick(index)"
      >
        <img :src="item.icon" :alt="item.text" class="nav-icon" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineProps } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
  navIndex: number
}>()

interface NavItem {
  text: string
  icon: string
  active: boolean
  path: string
}

const navItems = ref<NavItem[]>([
  { text: '绿电供应', icon: 'http://image.shengxuankj.com/daping/1.svg', active: false, path: 'green-power' },
  { text: '共享换电', icon: 'http://image.shengxuankj.com/daping/2.svg', active: false, path: 'shared-battery' },
  { text: '首页', icon: 'http://image.shengxuankj.com/daping/3.svg', active: false, path: 'index' },
  { text: '共享出行', icon: 'http://image.shengxuankj.com/daping/4.svg', active: false, path: 'shared-travel' },
  { text: '共享运力', icon: 'http://image.shengxuankj.com/daping/5.svg', active: false, path: 'shared-capacity' }
])

const emit = defineEmits<{
  navChange: [index: number, item: NavItem]
}>()

const handleNavClick = (index: number) => {
  // 重置所有项的active状态
  navItems.value.forEach(item => item.active = false)
  // 设置当前点击项为active
  navItems.value[index].active = true

  router.push({
    name: navItems.value[index].path
  })
  // 发出事件
  emit('navChange', index, navItems.value[index])
}

onMounted(()=>{
  navItems.value[props.navIndex].active = true
})
</script>

<style lang="less" scoped>
.nav-page {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -10px; // 负间距让导航项重叠
  position: relative;
}

.nav-item {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
  
  &:hover {
    z-index: 3;
    transform: scale(1.05);
  }
  
  &.active {
    z-index: 2;
    
    .nav-icon {
      filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 10px #00d4ff);
    }
  }
}

.nav-item:nth-child(1) .nav-icon {
  width: 250px;
  height: 50px;
}

.nav-item:nth-child(2) .nav-icon {
  width: 140px;
  height: 50px;
}

.nav-item:nth-child(3) .nav-icon {
  width: 120px;
  height: 50px;
}

.nav-item:nth-child(4) .nav-icon {
  width: 140px;
  height: 50px;
}

.nav-item:nth-child(5) .nav-icon {
  width: 250px;
  height: 60px;
}

.nav-icon {
  transition: all 0.3s ease;
  user-select: none;
}
</style>